<template>
    <div class="fillcontain">
        <head-top @changeLan='resetLabelWidth'></head-top>
        <div class="search-box" id="searchBox">
            <el-form :model="ruleForm" ref="ruleForm">
                <el-form-item :label="$t('message.applicantName')" prop="ApplicantName" :label-width="nameW">
                    <el-input clearable v-model="ruleForm.ApplicantName" :placeholder="$t('message.enterApplicantName')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('message.applicantDate')" prop="ApplicantDate" :label-width="dateW">
                    <el-date-picker
                        v-model="ruleForm.ApplicantDate[0]"
                        type="date"
                        :placeholder="$t('message.startDate')"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                    <span>-</span>
                    <el-date-picker
                        v-model="ruleForm.ApplicantDate[1]"
                        type="date"
                        :placeholder="$t('message.endDate')"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('message.status')" prop="ApplicantStatus" :label-width="stateW">
                    <el-select clearable v-model="ruleForm.ApplicantStatus" :placeholder="$t('message.pleaseSelectStatus')">
                        <el-option v-for="(item, index) in states" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <div class="button-line">
                    <el-form-item>
                        <el-tooltip class="item" effect="dark" :content="$t('message.search')" placement="top">
                            <el-button type="primary" @click="submitForm('ruleForm')" icon="iconfont icon-sousuo"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" :content="$t('message.reset')" placement="top">
                            <el-button type="info" @click="resetForm('ruleForm')" icon="iconfont icon-zhongzhi"></el-button>
                        </el-tooltip>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="table_container" v-loading='isloading'>
            <el-tooltip class="item" effect="dark" :content="$t('message.add')" placement="top">
                <el-button class="addBtn" type="primary" @click="handleAdd()" icon="iconfont icon-xinzeng-wubiankuang"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('message.administratorReview')" placement="top">
                <el-button class="addBtn" type="warning" @click="handleReview()" icon="iconfont icon-shenhe"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('message.del')" placement="top">
                <el-button class="addBtn" type="info" @click="handleDelete()" icon="iconfont icon-shanchu-kong"></el-button>
            </el-tooltip>
            <el-table
                ref="multipleTable"
                :data="tableData"
                :row-key="row => row.index"
                style="width: 100%;"
                class="tableStyle"
                @selection-change="handleSelectionChange"
                :header-cell-style="{
                    'background-color': '#f8f8f9',
                }"
                :height="tableHeight"
                :max-height="tableHeight">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column :label="$t('message.documentNo')" prop="DocumentNo">
                    <template slot-scope="scope">
                        <span class="udl" @click="review(scope.row)">{{scope.row.DocumentNo}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('message.employeeCode')" prop="EmployeeCode"></el-table-column>
                <el-table-column :label="$t('message.email')" prop="Email"></el-table-column>
                <el-table-column :label="$t('message.position')" prop="Position"></el-table-column>
                <el-table-column :label="$t('message.userName')" prop="UserName"></el-table-column>
                <el-table-column :label="$t('message.department')" prop="Department"></el-table-column>
                <el-table-column :label="$t('message.phoneNumber')" prop="PhoneNumber"></el-table-column>
                <el-table-column :label="$t('message.description')" prop="Description"></el-table-column>
                <el-table-column :label="$t('message.remarks')" prop="Remarks"></el-table-column>
                <el-table-column :label="$t('message.proposedDate')" prop="ProposedDate"></el-table-column>
                <el-table-column :label="$t('message.applicant')" prop="Applicant"></el-table-column>
                <el-table-column :label="$t('message.status')" prop="ApplicantStatus">
                    <template slot-scope="scope">
                        <span class="stateColor" v-bind:class="{nohandle: scope.row.ApplicantStatus === '未处理'}">{{scope.row.ApplicantStatus}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"  :page-size="PageSize" layout="total, prev, pager, next,sizes"
                    :total="count">
                </el-pagination>
            </div>
            <el-dialog :title="addTitle" :visible.sync="dialogAddVisible"  width="630px" :close-on-click-modal='false'>
                <el-form class="dialogForm" :model="addForm" :rules="rules" ref="addForm" :label-width="labelWidth">
                    <el-form-item :label="$t('message.applicant')" prop="Applicant">
                        <el-input v-model="addForm.Applicant" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.proposedDate')" prop="ProposedDate">
                        <el-date-picker
                            v-model="addForm.ProposedDate"
                            type="date"
                            placeholder=""
                            disabled
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item :label="$t('message.employeeCode')" prop="EmployeeCode">
                        <el-input v-model="addForm.EmployeeCode" readonly suffix-icon="iconfont icon-sousuo" @click.native="getEmployee()"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.actualUser')" prop="UserName">
                        <el-input v-model="addForm.UserName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.position')" prop="Position">
                        <el-input v-model="addForm.Position" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.email')" prop="Email">
                        <el-input v-model="addForm.Email" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.department')" prop="Department">
                        <el-input v-model="addForm.Department" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.phoneNumber')" prop="PhoneNumber">
                        <el-input v-model="addForm.PhoneNumber" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.description')" prop="Description" class="w100">
                        <el-input type="textarea" :rows="5" :placeholder="$t('message.pleaseEnterDescription')" v-model="addForm.Description"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-tooltip class="item" effect="dark" :content="$t('message.cancel')" placement="top">
                        <el-button @click="cancel()" icon="iconfont icon-guanbi-wukuang"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('message.save')" placement="top">
                        <el-button type="primary" @click="addApplicantion('addForm')" icon="iconfont icon-gou-wukuang"></el-button>
                    </el-tooltip>
                </div>
            </el-dialog>
            <el-dialog :title="reviewTitle" :visible.sync="dialogReviewVisible"  width="630px" :close-on-click-modal='false'>
                <el-form class="dialogForm" :model="reviewForm" ref="reviewForm" :label-width="labelWidth">
                    <el-form-item :label="$t('message.applicant')" prop="Applicant" v-show="isBatch">
                        <el-input v-model="reviewForm.Applicant" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.proposedDate')" prop="ProposedDate" v-show="isBatch">
                        <el-date-picker
                            v-model="reviewForm.ProposedDate"
                            type="date"
                            placeholder=""
                            disabled
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item :label="$t('message.employeeCode')" prop="EmployeeCode" v-show="isBatch">
                        <el-input v-model="reviewForm.EmployeeCode" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.actualUser')" prop="UserName" v-show="isBatch">
                        <el-input v-model="reviewForm.UserName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.position')" prop="Position" v-show="isBatch">
                        <el-input v-model="reviewForm.Position" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.email')" prop="Email" v-show="isBatch">
                        <el-input v-model="reviewForm.Email" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.department')" prop="Department" v-show="isBatch">
                        <el-input v-model="reviewForm.Department" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.phoneNumber')" prop="PhoneNumber" v-show="isBatch">
                        <el-input v-model="reviewForm.PhoneNumber" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.description')" prop="Description" class="w100" v-show="isBatch">
                        <el-input type="textarea" :rows="5" :placeholder="$t('message.pleaseEnterDescription')" v-model="reviewForm.Description" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.auditOperation')" prop="AuditOperation" class="w100">
                        <el-radio-group v-model="reviewForm.AuditOperation">
                            <el-radio :label="1">同意</el-radio>
                            <el-radio :label="2">拒绝</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="$t('message.administratorNote')" prop="Remarks" class="w100">
                        <el-input type="textarea" :rows="5" :placeholder="$t('message.pleaseEnterAdministratorNote')" v-model="reviewForm.Remarks"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-tooltip class="item" effect="dark" :content="$t('message.review')" placement="top">
                        <el-button type="primary" @click="reviewApplicantion()" icon="iconfont icon-gou-wukuang"></el-button>
                    </el-tooltip>
                </div>
            </el-dialog>
            <el-dialog :title="addUserTitle" :visible.sync="dialogAddUserVisible"  width="750px" :close-on-click-modal='false'>
                <el-form :model="userForm" ref="userForm" :inline="true">
                    <el-form-item :label="$t('message.employeeCode')" prop="EmployeeCode" :label-width="nameW">
                        <el-input clearable v-model="userForm.EmployeeCode" :placeholder="$t('message.pleaseEnterEmployeeCode')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.employeeName')" prop="EmployeeName" :label-width="nameW">
                        <el-input clearable v-model="userForm.EmployeeName" :placeholder="$t('message.pleaseEnterEmployeeName')"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-tooltip class="item" effect="dark" :content="$t('message.search')" placement="top">
                            <el-button type="primary" @click="searchUserForm('userForm')" icon="iconfont icon-sousuo"></el-button>
                        </el-tooltip>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="userData"
                    :row-key="row => row.index"
                    style="width: 100%;"
                    class="tableStyle"
                    :header-cell-style="{
                        'background-color': '#f8f8f9',
                    }">
                    <el-table-column width="55">
                        <template slot-scope="scope">
                            <el-radio :label="scope.$index" v-model="userRadio" @change.native="getRow(scope.$index, scope.row)"></el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('message.employeeCode')" prop="EmployeeCode"></el-table-column>
                    <el-table-column :label="$t('message.employeeName')" prop="UserName"></el-table-column>
                    <el-table-column :label="$t('message.department')" prop="Department"></el-table-column>
                    <el-table-column :label="$t('message.position')" prop="Position"></el-table-column>
                    <el-table-column :label="$t('message.phoneNumber')" prop="PhoneNumber"></el-table-column>
                    <el-table-column :label="$t('message.email')" prop="Email"></el-table-column>
                </el-table>
                <div class="Pagination">
                    <el-pagination
                        @size-change="handleSizeChanges"
                        @current-change="handleCurrentChanges"
                        :current-page="currentPages"
                        :page-sizes="[10, 20, 30, 40]"  :page-size="PageSizes" layout="total, prev, pager, next,sizes"
                        :total="counts">
                    </el-pagination>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import headTop from "../components/headTop";
    import { baseUrl, baseImgPath } from "@/config/env";
    import { getStore, getLocal } from "../config/mUtils"
    // import { getRoleList, getCompanys, editRole, deleteRole, permissions, getRoleInfo } from "@/api/getData";
    export default {
        components: {
            headTop
        },
        data() {
            return {
                baseUrl,
                baseImgPath,
                PageIndex: 1,
                PageIndexs: 1,
                PageSize: 10,
                PageSizes: 10,
                count: 2,
                counts: 2,
                tableData: [
                    {
                        DocumentNo: 'D00000001',
                        EmployeeCode: 'SSPC0000001',
                        Email: 'zhangyu@sspc.com.cn',
                        Position: '部门经理',
                        UserName: '张宇',
                        Department: 'IT',
                        PhoneNumber: '15906215484',
                        Description: '',
                        Remarks: '',
                        ProposedDate: '2019-04-28 10:00:00',
                        Applicant: '张宇',
                        ApplicantStatus: '未处理'
                    }, {
                        DocumentNo: 'D00000002',
                        EmployeeCode: 'SSPC0000002',
                        Email: 'liming@sspc.com.cn',
                        Position: '部门经理',
                        UserName: '陈璐',
                        Department: '行政部',
                        PhoneNumber: '13771561520',
                        Description: '',
                        Remarks: '',
                        ProposedDate: '2019-04-28 10:00:00',
                        Applicant: '李明',
                        ApplicantStatus: '已处理'
                    }
                ],
                userData: [
                    {
                        EmployeeCode: 'SSPC0000001',
                        UserName: '张菲',
                        Department: '行政',
                        Position: '经理',
                        PhoneNumber: '15906215484',
                        Email: 'zhangyu@sspc.com.cn'
                    }, {
                        EmployeeCode: 'SSPC0000002',
                        UserName: '李明',
                        Department: 'IT',
                        Position: '经理',
                        PhoneNumber: '15906215484',
                        Email: 'zhangyu@sspc.com.cn'
                    }
                ],
                multipleSelection: [],
                currentPage: 1,
                currentPages: 1,
                dialogAddVisible: false,
                dialogReviewVisible: false,
                dialogAddUserVisible: false,
                isloading: false,
                states: [
                    {
                        label: '已处理',
                        value: '0'
                    }, {
                        label: '未处理',
                        value: '1',
                    }
                ],
                tableHeight: 0,
                ruleForm: {
                    ApplicantName: "",
                    ApplicantDate: ['', ''],
                    ApplicantStatus: ""
                },
                addForm: {
                    Applicant: '',
                    ProposedDate: new Date(),
                    EmployeeCode: "",
                    UserName: "",
                    Position: "",
                    Email: "",
                    Department: "",
                    PhoneNumber: "",
                    Description: ""
                },
                reviewForm: {
                    Applicant: '',
                    ProposedDate: '',
                    EmployeeCode: "",
                    UserName: "",
                    Position: "",
                    Email: "",
                    Department: "",
                    PhoneNumber: "",
                    Description: "",
                    AuditOperation: 1,
                    Remarks: ''
                },
                userForm: {
                    EmployeeCode: '',
                    EmployeeName: ''
                },
                addTitle: this.$t('message.addApplication'),
                reviewTitle: this.$t('message.administratorReview'),
                addUserTitle: this.$t('message.addPeople'),
                userSelection: {},
                userRadio: null,
                isBatch: true,
                nameW: 0 + 'px',
                dateW : 0 + 'px',
                stateW : 0 + 'px',
                labelWidth : 0 + 'px'
            };
        },
        computed: {
            rules: function() {
                return {
                    EmployeeCode: [{ required: true, message: this.$t('message.pleaseSelectEmployeeCode'), trigger: "change" }],
                    Description: [{ required: true, message: this.$t('message.pleaseEnterDescription'), trigger: "blur" }],
                }
            },
        },
        created() {
            this.watchHeight();
            // this.initData();
            this.resetLabelWidth();
        },
        mounted() {
            setTimeout(() => {
                let widowHeight = document.documentElement.clientHeight-275;
                let h = document.getElementById('searchBox').clientHeight;
                this.tableHeight = widowHeight - h;
            }, 1);
        },
        methods: {
            watchHeight() {
                setTimeout(() => {
                    const that = this;
                    window.onresize = function temp() {
                        let widowHeight = document.documentElement.clientHeight-275;
                        let h = document.getElementById('searchBox').clientHeight;
                        that.tableHeight = widowHeight - h;
                    };
                }, 1);
            },
            resetLabelWidth() {
                if (getLocal('language') === 'en_US') {
                    this.nameW = 120 + 'px';
                    this.dateW = 130 + 'px';
                    this.stateW = 70 + 'px';
                    this.labelWidth = 110 + 'px';
                } else {
                    this.nameW = 75 + 'px';
                    this.dateW = 85 + 'px';
                    this.stateW = 60 + 'px';
                    this.labelWidth = 95 + 'px';
                }
            },
            async initData() {
                /**获取用户列表 */
                try {
                    this.getLanguageResource();
                    this.getApplicationList();
                } catch (err) {
                    console.log("获取数据失败", err);
                }
            },
            async getApplicationList() {
                const crs = await getRoleList({
                    CompanyCode: this.ruleForm.CompanyCode,
                    RoleName: this.ruleForm.RoleName,
                    PageSize: this.PageSize,
                    PageIndex: this.PageIndex,
                    UserId:getStore('Id')
                });
                if (crs.Flag) {
                    this.isloading = false;
                    this.count = crs.Result.total;
                    this.tableData = crs.Result.rows;
                }
            },
            submitForm(formName) {
                this.getApplicationList();
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.getApplicationList();
            },
            handleSizeChange(val) {
                this.currentPage = 1;
                this.PageIndex = 1;
                this.PageSize = val;
                this.getApplicationList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.PageIndex = val;
                this.getApplicationList();
            },
            async getUserList() {
                const crs = await getUserList({
                    CompanyCode: this.ruleForm.CompanyCode,
                    RoleName: this.ruleForm.RoleName,
                    PageSize: this.PageSize,
                    PageIndex: this.PageIndex,
                    UserId:getStore('Id')
                });
                if (crs.Flag) {
                    this.isloading = false;
                    this.count = crs.Result.total;
                    this.tableData = crs.Result.rows;
                }
            },
            handleSizeChanges(val) {
                this.currentPages = 1;
                this.PageIndexs = 1;
                this.PageSizes = val;
                this.getUserList();
            },
            handleCurrentChanges(val) {
                this.currentPages = val;
                this.PageIndexs = val;
                this.getUserList();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleAdd() {
                this.dialogAddVisible = true;
                this.addForm = {
                    Applicant: '张宇',
                    ProposedDate: new Date(),
                    EmployeeCode: "",
                    UserName: "",
                    Position: "",
                    Email: "",
                    Department: "",
                    PhoneNumber: "",
                    Description: ""
                };
                this.userRadio = null;
            },
            review(row) {
                this.dialogReviewVisible = true;
                this.isBatch = true;
                this.reviewForm = {
                    Applicant: row.Applicant,
                    ProposedDate: row.ProposedDate,
                    EmployeeCode: row.EmployeeCode,
                    UserName: row.UserName,
                    Position: row.Position,
                    Email: row.Email,
                    Department: row.Department,
                    PhoneNumber: row.PhoneNumber,
                    Description: row.Description
                };
            },
            cancel() {
                this.dialogAddVisible = false;
                this.$refs['addForm'].resetFields();
            },
            addApplicantion(formName) {
                this.$refs[formName].validate(async valid => {
                    if (valid) {
                        this.dialogAddVisible = false;
                    } else {
                        return false;
                    }
                });
            },
            reviewApplicantion() {
                this.dialogReviewVisible = false;
            },
            handleReview() {
                if (this.multipleSelection.length > 0) {
                    this.isBatch = false;
                    this.dialogReviewVisible = true;
                } else {
                    this.$message({
                        type: "warning",
                        message: this.$t('message.selectReviewData')
                    });
                }
            },
            handleDelete(index, row) {
                if (this.multipleSelection.length > 0) {
                    this.$confirm(this.$t('message.isDel'), 'Warning', {
                        confirmButtonText: ' ',
                        cancelButtonText: ' ',
                        confirmButtonClass: 'iconfont icon-gou-wukuang',
                        cancelButtonClass: 'iconfont icon-guanbi-wukuang',
                        type: 'warning'
                    }).then(() => {
                    }).catch(() => {
                    });
                } else {
                    this.$message({
                        type: "warning",
                        message: this.$t('message.selectDelData')
                    });
                }
            },
            getEmployee() {
                this.dialogAddUserVisible = true;
            },
            searchUserForm(formName) {
                this.getApplicationList();
            },
            getRow(index, row) {
                this.userSelection = row;
                this.addForm = {
                    Applicant: '张宇',
                    ProposedDate: new Date(),
                    EmployeeCode: row.EmployeeCode,
                    UserName: row.UserName,
                    Position: row.Position,
                    Email: row.Email,
                    Department: row.Department,
                    PhoneNumber: row.PhoneNumber
                }
                console.log(row);
            }
        }
    };
</script>
